<!-- 房态 -->
<template>
  <div class="bg-white relative-box padding-20">
    <div class="import-btn-box">
      <el-select v-if="systemType == 'businessBuildingOperate'" class="margin-right-10" style="width: 160px" v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
        <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
      </el-select>
      <el-select class="margin-right-10" style="width: 160px" v-model="m_Form.spaceKey" placeholder="切换楼栋" size="mini" @change="changeBuild">
        <el-option v-for="(item, index) in buildList" :key="index" :label="item.spaceName" :value="item.spaceKey"> </el-option>
      </el-select>
      <el-select style="width: 160px" v-model="version" placeholder="切换版本" size="mini" @change="changeVersion">
        <el-option v-for="(item, index) in versionList" :key="index" :label="item.optionName" :value="item.version"> </el-option>
      </el-select>
      <el-upload :show-file-list="false" style="padding: 0 10px" class="upload-demo" action accept="" :http-request="event => beforeupload(event.file)">
        <el-button type="primary" size="mini" plain>导入数据</el-button>
      </el-upload>
      <el-button type="primary" @click="out()" size="mini" plain>导出数据</el-button>
    </div>

    <el-container v-if="m_Floors.length > 0" class="containerH">
      <div class="floor-box">
        <div class="floor-item" :class="activeFloorTab == item.floorKey ? 'active-floor' : ''" v-for="(item, i) in m_Floors" :key="i" :index="item.floorKey" @click="MenuSelect(item.floorKey)">{{ item.floorName }}</div>
      </div>
      <el-container>
        <el-header class="padding-left-right-20">
          <MenuTabs :PROP.sync="m_MenyTabs_Prop" @MenuSelect="TabMenuSelect"></MenuTabs>
        </el-header>
        <el-main class="fill-box">
          <explain ref="explain" pageType="room" :data-list="caseList"></explain>
          <div class="fill-box flex">
            <div class="flex-1 relative-box svg-div">
              <img :src="compassIcon" class="compass-icon" />
              <ImgPoint v-if="m_FormData.cadDrawing" @pointClick="pointClick" :points="m_Points" :backImg="m_FormData.cadDrawing" :svg-height="m_FormData.svgHeight" :svg-width="m_FormData.svgWidth"> </ImgPoint>
              <el-empty class="margin-top-120" v-else description="暂无图纸"></el-empty>
            </div>
            <legend-tip pageType="room" :parm-data="parmData" :asset-type-list="assetTypeList"></legend-tip>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-empty v-else description="暂无数据"></el-empty>
    <room-dialog ref="roomDialog" :model="m_Detail.form"></room-dialog>
  </div>
</template>
<script>
  import MenuTabs from '@/common/components/MenuTabs';
  import RoomDialog from '@c/assetDialog/roomDialog.vue';
  import Explain from '@c/roomStatus/explain';
  import LegendTip from '@c/roomStatus/legendTip';
  import ImgPoint from '@c/roomStatus/imgPoint';
  import { projectList } from '@/api';
  import Api from '../../../api/roomStatus';
  import { accSubtr, formDataDate } from '@/common/js/utils.js';
  export default {
    components: { MenuTabs, ImgPoint, Explain, LegendTip, RoomDialog },
    data() {
      return {
        projectKey: localStorage.getItem('projectKey'),
        projectOptions: [],
        activeFloorTab: '',
        compassIcon: require('../../../assets/imgs/compass.png'),
        m_Form: {
          projectKey: localStorage.getItem('projectKey'),
          spaceKey: '',
          greaterCadArea: null, //cad 面积大于
          lessCadArea: null, //cad 面积小于
          greaterUnitPrice: null, //cad 租金单价大于
          lessUnitPrice: null, //cad 租金单价小于
          partnerCategory: null, //客户类型
          partnerName: null, //客户名称
          parmDataKey: null,
        },
        caseList: [
          { name: '本层建筑面积', icon: require('../../../assets/imgs/areaJian.png'), num: 0 },
          { name: '已租赁面积', icon: require('../../../assets/imgs/areaZu.png'), num: 0 },
          { name: '空置面积', icon: require('../../../assets/imgs/areaKong.png'), num: 0 },
          { name: '本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
          { name: '截止本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '截止本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
        ],
        m_Points: [],
        m_FormData: null,
        m_Detail: {
          vsb: false,
          form: {},
        },
        m_MenyTabs_Prop: {
          father: this,
          defaultactive: null,
          options: [],
        },
        m_Floors: [], //楼层
        m_FloorsDefaultActive: null,
        parmData: [
          { value: 'isVacancy', text: '空置', color: '#D6D6D4' },
          { value: 'isUnderContract', text: '履约中', color: '#8AC8B3' },
          // { value: 'isFinish', text: '装修期', color: '#9EA4B7' },
          { value: 'isArrearage', text: '欠费', color: '#E27A78' },
          { value: 'isExpiring', text: '即将到期', color: '#F8D595' },
          { value: 'isSigned', text: '已签约', color: '#C2B0A2' },
        ],
        assetTypeList: [],
        versionList: [],
        version: '',
        buildList: [],
        systemType: localStorage.getItem('systemType'),
      };
    },

    methods: {
      //数据源
      async GetData(isFirst) {
        if (this.m_FormData) {
          this.m_FormData.cadDrawing = '';
        }
        let data = {
          ...this.m_Form,
          floorKey: this.m_FloorsDefaultActive,
          partitionKey: this.m_MenyTabs_Prop.defaultactive,
          version: this.version || null,
        };
        if (this.m_Form.parmDataKey) this.$set(data, this.m_Form.parmDataKey, 1);
        let res = await Api.listRoom(data);
        if (!res.success) return;

        this.version = res.version || '';

        this.m_Floors = res.floors;
        if (isFirst && res.floors.length > 0) {
          this.initSvgAreaData(res.floors);
        }
        this.m_FloorsDefaultActive = null;
        this.$nextTick(() => {
          this.m_FloorsDefaultActive = res.floorKey;
        });
        this.m_MenyTabs_Prop.options = [];
        res.partitions.forEach(element => {
          this.m_MenyTabs_Prop.options.push({ title: element.partitionName, show: true, path: element.primaryKey });
        });
        res.spaceInfoDtos.forEach(item => (item.color = ''));
        this.m_MenyTabs_Prop.defaultactive = res.partitionKey;
        this.m_FormData = res;
        //设置颜色
        this.setPointColor(res.spaceInfoDtos);
        this.m_Points = res.spaceInfoDtos;
      },

      //版本数据源
      async getVersionList() {
        let res = await Api.versionList({ floorKey: this.activeFloorTab });
        res.rows.forEach(item => {
          item.optionName = formDataDate(item.createTime);
        });
        this.versionList = res.rows || [];
      },

      //初始化楼层选中，图例面积数据. 默认选中1层：buildingStorey == 1
      initSvgAreaData(list) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.buildingStorey == 1) {
            this.activeFloorTab = item.floorKey;
            this.setArea(item);
            this.getVersionList();
            return;
          }
        }
        this.activeFloorTab = list[0].floorKey;
        this.setArea(list[0]);
        this.getVersionList();
      },

      //业态数据源
      async commercialFn() {
        let res = await Api.listByMapBizId({
          bizId: 'commercial_rent_main_data',
          catalogTypeList: ['business_type_child'],
          mapBizId: localStorage.getItem('userEnterpriseid'), //企业id
        });
        this.assetTypeList = res.rows;
        this.assetTypeList.push({
          iconUrl: require('../../../assets/imgs/mainShop.png'),
          catalogName: '主力店',
        });
      },

      //给点位赋值颜色
      setPointColor(list) {
        list.forEach(item => {
          let color = null;
          if (item.type) {
            color = this.parmData.find(res => {
              return res.value == item.type;
            }).color;
          }
          item.color = color || '#ffffff';
        });
      },

      //点击点位
      async pointClick(res) {
        this.m_Detail.form = {
          ...res,
          spaceCadDto: this.m_FormData.spaceCadDto,
          sumCadArea: this.m_FormData.sumCadArea,
        };
        console.log(this.m_Detail.form);
        this.$refs.roomDialog.dialogShow = true;
        this.$refs.roomDialog.activeTab = 'asset';
        await this.$nextTick();
        this.$refs.roomDialog.getAssetInfo();
      },

      //cad图上面的tab切换
      TabMenuSelect(path) {
        this.m_MenyTabs_Prop.defaultactive = path;
        this.m_FloorsDefaultActive = null;
        this.GetData();
      },

      //左侧楼层切换
      MenuSelect(key) {
        this.m_Points = [];
        this.activeFloorTab = key;
        this.m_FloorsDefaultActive = key;
        this.GetData();
        this.getVersionList();
        let floor = this.m_Floors.find(item => item.floorKey == key);
        this.setArea(floor);
      },

      //设置右侧面积
      setArea(floor) {
        this.caseList[0].num = floor.floorBuildingArea || 0;
        this.caseList[1].num = floor.floorBuildingRentArea || 0;
        let emptyArea = accSubtr(Number(floor.floorBuildingArea), Number(floor.floorBuildingRentArea));
        this.caseList[2].num = emptyArea > 0 ? emptyArea : 0;
        this.caseList[3].num = floor.incomeAmount || 0;
        this.caseList[4].num = floor.forcastAmount || 0;
        this.caseList[5].num = floor.incomeTotalAmount || 0;
        this.caseList[6].num = floor.forcastTotalAmount || 0;
      },

      //导入数据
      beforeupload(file) {
        Api.importSpaceInfo(file).then(res => {
          this.$message.success('上传成功');
          this.GetData();
        });
      },

      //导出数据
      out() {
        Api.outSpaceInfo({ ...this.m_Form, floorKey: this.m_FloorsDefaultActive, partitionKey: this.m_MenyTabs_Prop.defaultactive }).then(res => {});
      },

      //切换版本
      async changeVersion() {
        if (this.m_FormData) {
          this.m_FormData.cadDrawing = '';
        }
        let data = {
          ...this.m_Form,
          floorKey: this.m_FloorsDefaultActive,
          partitionKey: this.m_MenyTabs_Prop.defaultactive,
          version: this.version,
        };
        let res = await Api.listRoom(data);
        if (!res.success) return;
        this.m_FormData.cadDrawing = res.cadDrawing;
        this.m_FormData.svgWidth = res.svgWidth;
        this.m_FormData.svgHeight = res.svgHeight;
        this.m_Points = res.spaceInfoDtos;
      },
      async changeBuild() {
        this.m_FloorsDefaultActive = null
        this.m_MenyTabs_Prop.defaultactive = null
        this.version = null
        this.GetData("first")
      },
      async getBuildList(projectKey) {
        let res = await Api.apiAllBuildList({
          projectKey: projectKey,
        });

        this.buildList = res.rows || [];

        if (this.buildList.length) {
          this.m_Form.spaceKey = this.buildList[0].spaceKey;
        }
      },
      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        this.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        this.m_Form.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        if (!this.projectKey) return;
        await this.getBuildList(this.projectKey);
        this.GetData('first');
      },

      async changeProject() {
        this.m_Form.projectKey = this.projectKey;
        await this.getBuildList(this.projectKey);
        this.GetData('first');
      },
    },

    async mounted() {
      this.commercialFn();
      //businessBuildingOperate 商写运营要独立选择项目 初始为第一个项目
      if (this.systemType == 'businessBuildingOperate') {
        this.getProjectList();
      } else {
        if (this.projectKey) {
          await this.getBuildList(this.projectKey);
          this.GetData('first');
        }
      }
    },
  };
</script>
<style scoped lang="scss">
  ::v-deep .el-tag {
    cursor: pointer;
  }
  ::v-deep .el-radio {
    margin: 0px;
  }
  .containerH {
    min-height: calc(100vh - 325px);
  }
  .import-btn-box {
    position: absolute;
    right: 10px;
    top: -47px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  ::v-deep .el-menu {
    border-right: none;
  }

  ::v-deep .el-container {
    height: 100%;
  }

  .fill-box {
    overflow: hidden;
  }

  .floor-box {
    width: 170px;
    background: #fbfbfb;
    overflow-y: auto;
    .floor-item {
      text-align: center;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      cursor: pointer;
    }
    .floor-item:hover {
      background: rgba($color: #3384fe, $alpha: 0.05);
      color: #3384fe;
    }
    .active-floor {
      background: rgba($color: #3384fe, $alpha: 0.05);
      color: #3384fe;
    }
  }
  .floor-box::-webkit-scrollbar {
    display: none;
  }
  .compass-icon {
    width: 20px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 10;
  }
  .svg-div {
    width: 600px;
  }
</style>
